import React from 'react'
import SearchArea from 'components/search-area'
import config from 'config'

export default {
  key: 'search-area',
  name: 'SearchArea 搜索区域',
  author: '张然',
  description: '多条件搜索区域的封装，一般用于数据的多条件搜索、数据新建及编辑操作。',
  isExampleFull: true,
  api: [
    {
      title: 'API',  //API标题
      data: [{
        param: 'searchForm', description: '必填，传入的表格配置，见下方配置。', type: 'array', defaultValue: '-'
      },{
        param: 'checkboxListForm', description: '传入的checkbox表单列表，见下方配置。', type: 'array', defaultValue: '-'
      },{
        param: 'submitHandle', description: '点击搜索时的事件。', type: 'function(values)', defaultValue: '-'
      },{
        param: 'clearHandle', description: '点击清空时的事件。', type: 'function', defaultValue: '-'
      },{
        param: 'eventHandle', description: '当设置了::event::的表单改变时的回调，详见下方::searchForm::内的::event::。', type: 'function(event, value)', defaultValue: '-'
      },{
        param: 'okText', description: 'SearchArea 搜索按钮的文字。', type: 'string|ReactNode', defaultValue: '搜索'
      },{
        param: 'clearText', description: 'SearchArea 清空按钮的文字。', type: 'string|ReactNode', defaultValue: '清空'
      },{
        param: 'maxLength', description: 'SearchArea内默认显示的表单数量（::items::算一个），超过就显示展开/隐藏按钮。', type: 'number', defaultValue: '6'
      },{
        param: 'checkboxChange', description: 'SearchArea上方的Checkbox表单列表修改时的事件。', type: 'function(value)', defaultValue: '-'
      },{
        param: 'isHideClearText', description: '是否隐藏清空按钮。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'isHideOkTextText', description: '是否隐藏搜索按钮。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'extraFields', description: '额外的表单项，外部可以传入节点，不过加了额外的搜索，需要在外面的submitHandle函数里面进行接收。', type: 'array', defaultValue: '-'
      },{
        param: 'loading', description: '配合::BasicInfo::组件使用，详细请见::BasicInfo::。', type: 'boolean', defaultValue: '-'
      }],
      description: ''
    },
    {
      title: 'searchForm配置项',
      data: [{
        param: 'type', description: '必填，表单项类型, 为::input::、::inputNumber::、::select::、 ::date::、::radio::、::big_radio::、::checkbox::、::combobox::、::multiple::、 ::list::、 ::items::、 ::value_list::、 ::inputter::中的一种',
        type: 'string', defaultValue: '-'
      },{
        param: 'id', description: '必填，且::searchForm::配置内唯一，表单项的::id::，搜索后::submitHandle::返回的数据key值。', type: 'string', defaultValue: '-'
      },{
        param: 'label', description: '必填，表单项的标题。', type: 'string', defaultValue: '-'
      },{
        param: 'placeholder', description: '表单项的::placeholder::。', type: 'string', defaultValue: '请输入|请选择'
      },{
        param: 'disabled', description: '表单项是否禁用。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'isRequired', description: '表单项是否必填。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'colSpan', description: '表单项所占的栅格数。', type: 'number', defaultValue: '8'
      },{
        param: 'defaultValue', description: '表单项默认值。特殊情况如果::type::为::select::、::combobox::、::multiple::中的一个且::options::为空时，可传入::string::或形如::{label, key}::的作为初始值。', type: 'any', defaultValue: '-'
      },{
        param: 'event', description: '如果该表单项设置了该值，则当该表单项的值操作后发生改变时，则会在::SearchArea::的::eventHandle::方法中返回对应的值，用作表单项的::onChange::。', type: 'string', defaultValue: '-'
      },{
        param: 'items', description: '当::type::为::items::时必填，可在一个表单项宽度内放置多个表单项，每一个表单项均分宽度。', type: 'array<searchForm>', defaultValue: '-'
      },{
        param: 'options', description: '当::type::为::select::、::radio::、::big_radio::、::checkbox::、::combobox::、::multiple::时必填，结构为{label, value}组成的对象数组，用于渲染此类表单项的选项。', type: 'array', defaultValue: '-'
      },{
        param: 'getUrl', description: '当::type::为::select::、::combobox::、::multiple::中的一个且数据需要远程获取时的接口url，该接口会在首次点击时进行请求，并自动根据下方的::labelKey::、::valueKey::、::listKey::规则填充至::options::中。', type: 'string', defaultValue: '-'
      },{
        param: 'method', description: '向::getUrl::发动请求的方法。', type: 'string', defaultValue: 'get'
      },{
        param: 'getParams', description: '向::getUrl::发动请求时的参数。', type: 'object', defaultValue: '-'
      },{
        param: 'labelKey', description: '当::type::为::select::、::combobox::、::multiple::中的一个且数据需要远程获取时，将会把返回结果每个对象内此key对应的值填充到::options::内的::label::项上，::label::字段为显示在页面上的字段。例如返回结果为[{ name: \'张三\', id: \'1\' }]，则此值应为\'name\'。如果::type::为::list::，则为::Chooser::的::labelKey::', type: 'string', defaultValue: '-'
      },{
        param: 'valueKey', description: '当::type::为::select::、::combobox::、::multiple::中的一个且数据需要远程获取时，将会把返回结果每个对象内此key对应的值填充到::options::内的::value::项上，::value::字段为表单最终返回的字段。例如返回结果为[{ name: \'张三\', id: \'1\' }]，则此值应为\'id\'。如果::type::为::list::或::inputter::，则为::Chooser::或::Inputter::的::valueKey::', type: 'string', defaultValue: '-'
      },{
        param: 'listKey', description: '当::type::为::select::、::combobox::、::multiple::中的一个且数据需要远程获取时，如果返回的结果数组时返回对象的一个值，则该值应为对应的key值。例如接口返回的为{ rows: [{ name: \'张三\', id: \'1\' }] }，则此值应为\'rows\''
      },{
        param: 'searchUrl', description: '当::type::为::combobox::或::multiple::时，如果数据需要关键字搜索远程获取，则此值为对应的搜索接口url。', type: 'string', defaultValue: '-'
      },{
        param: 'searchKey', description: '请求::searchUrl::时携带的关键字的key值。', type: 'string', defaultValue: '-'
      },{
        param: 'renderOption', description: '当::type::为::select::、::combobox::、::multiple::、::value_list::中的一个时选项::Option::的渲染规则。', type: 'function(option)', defaultValue: 'option => option.label'
      },{
        param: 'listType', description: '当::type::为::list::、::inputter::时，::Chooser::、::Inputter::组件所需要的::type::。', type: 'string', defaultValue: '-'
      },{
        param: 'listExtraParams', description: '当::type::为::list::、::inputter::时，::Chooser::、::Inputter::组件所需要的::listExtraParams::。', type: 'object', defaultValue: '-'
      },{
        param: 'selectorItem', description: '当::type::为::list::、::inputter::时，::Chooser::、::Inputter::组件所需要的::selectorItem::。', type: 'object', defaultValue: '-'
      },{
        param: 'single', description: '当::type::为::list::时，::Chooser::是否为单选。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'valueListCode', description: '当::type::为::value_list::时必填，值列表的::code::。', type: 'number|string', defaultValue: '-'
      },{
        param: 'selectorType', description: '当::type::为::selector::时必填，::Selector::的::type::。', type: 'string', defaultValue: '-'
      },{
        param: 'showTime', description: '当::type::为::date::时，控制是否需要选择时间。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'entity', description: '当::type::为::select::或::list::时有效，控制返回的值是否需要整个对象而非单个值。', type: 'boolean', defaultValue: 'false'
      }],
      description: ''
    },
    {
      title: 'checkboxListForm配置项',
      data: [{
        param: 'id', description: '必填，且::searchForm::配置内唯一，表单项的::id::，搜索后::submitHandle::返回的数据key值。', type: 'string', defaultValue: '-'
      },{
        param: 'single', description: '是否单选。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'items', description: '必填，每一个配置项的具体数据，见下方配置。', type: 'array', defaultValue: '-'
      }],
      description: ''
    },
    {
      title: 'checkboxListForm.items配置项',
      data: [{
        param: 'label', description: '必填，每行的标题。', type: 'string', defaultValue: '-'
      },{
        param: 'key', description: '必填，唯一，每行的标识。', type: 'string', defaultValue: '-'
      },{
        param: 'checked', description: '默认选中的值。', type: 'array', defaultValue: '-'
      },{
        param: 'options', description: '必填，::checkbox::组件的配置项数组::{label: string, value: string|number, disabled:boolean}::。', type: 'array', defaultValue: '-'
      }],
      description: ''
    }],
  example: [
    {
      title: '基本用法',
      description: '可以通过::searchForm::配置完成常用的控件布局。',
      state: {
        searchForm: [{
          type: 'input', id: 'input', label: '输入框', placeholder: '请输入'
        },{
          type: 'inputNumber', id: 'inputNumber', label: '数字输入框', placeholder: '请输入数字'
        },{
          type: 'select', id: 'select', label: '选择框', placeholder: '请选择',
          options: [
            { label: '选项1', value: '选项1' },
            { label: '选项2', value: '选项2' },
            { label: '选项3', value: '选项3' }
          ]
        },{
          type: 'date', id: 'date', label: '日期选择', placeholder: '请选择日期'
        },{
          type: 'date', id: 'datetime', label: '日期时间选择', placeholder: '请选择日期时间', showTime: true
        },{
          type: 'radio', id: 'radio', label: '单选',
          options: [
            { label: '单选1', value: '单选1' },
            { label: '单选2', value: '单选2' },
          ]
        },{
          type: 'checkbox', id: 'checkbox', label: '多选',
          options: [
            { label: '多选1', value: '多选1' },
            { label: '多选2', value: '多选2' },
          ]
        },{
          type: 'switch', id: 'switch', label: '开关'
        }],
        checkboxListForm: [{
          id: 'checkBoxList', items: [{
            label: '多选条件', key: 'checkBoxList1', options: [
              {label: '条件1', value: '条件1'},{label: '条件2', value: '条件2'},
              {label: '条件3', value: '条件3'},{label: '条件4', value: '条件4'},
              {label: '条件5', value: '条件5'},{label: '条件6', value: '条件6'},
              {label: '条件7', value: '条件7'},{label: '条件8', value: '条件8'},
            ]
          }]
        }]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm, checkboxListForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}
                      checkboxListForm={checkboxListForm}/>
        )
      }
    },
    {
      title: '布局',
      description: '可以在栅格内通过::items::添加栅格, 也可以使用::colSpan::自定义栅格长度，同时两个按钮的文字可以更换，也可以隐藏其中任一一个按钮。',
      state: {
        searchForm: [{
          type: 'items', id: 'items1', items: [{
            type: 'date', id: 'startDate', label: '开始时间'
          },{
            type: 'date', id: 'endDate', label: '结束时间'
          }]
        },{
          type: 'input', id: 'businessCode', label: '报销单号', placeholder: '请输入', colSpan: 16
        }]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}
                      okText="我要搜索"
                      isHideClearText/>
        )
      }
    },
    {
      title: '基本表单规则',
      description: '可以使用::isRequired::设置必填、::defaultValue::设置默认值，::disabled::设置禁用。',
      state: {
        searchForm: [{
          type: 'input', id: 'requiredItem', label: '必填项', placeholder: '请输入', isRequired: true
        },{
          type: 'input', id: 'defaultValueItem', label: '有默认值', placeholder: '请输入', defaultValue: '默认值'
        },{
          type: 'input', id: 'disabledItem', label: '不可用', placeholder: '请输入', disabled: true
        }]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}/>
        )
      }
    },
    {
      title: 'LOV的接口配置',
      description: '通过::getUrl::设置接口地址、::method::设置接口请求方式、::labelKey::设置要显示的字段、::valueKey::设置搜需需要的字段、::getParams::设置搜索需要的参数，即可配置为一个远程LOV。' +
      '如果是值列表，需要配置::type::为::value_list::，然后设置::valueListCode::为对应值列表编号即可。',
      state: {
        searchForm: [{
          type: 'select', id: 'setOfBooksId', label: '帐套', placeholder: '请选择', options: [],
          getUrl: `${config.baseUrl}/api/setOfBooks/by/tenant`, method: 'get',
          labelKey: 'setOfBooksCode', valueKey: 'id', getParams: { roleType: 'TENANT' }
        }, {
          type: 'value_list', id: 'valueList', label: '值列表1001', valueListCode: 1001, options: []
        }]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}/>
        )
      }
    },
    {
      title: '关键字搜索的远程LOV',
      description: '如果是远程接口搜索，则通过设置::type::为::combobox::，::searchUrl::搜索接口地址与::searchKey::字段作为接口参数即可。',
      state: {
        searchForm: [{
          type: 'combobox',
          id: 'user',
          label: '员工',
          placeholder: '请输入姓名、工号',
          options: [],
          searchUrl: `${config.baseUrl}/api/search/users/all`,
          method: 'get',
          searchKey: 'keyword',
          labelKey: 'fullName',
          valueKey: 'userOID',
          renderOption: option => (`${option.employeeID}-${option.fullName}`)
        }]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}/>
        )
      }
    },
    {
      title: '关键字搜索的多选远程LOV',
      description: '如果是远程接口搜索，则通过设置::type::为::multiple::，其他与单选参数一致即可。',
      state: {
        searchForm: [{
          type: 'multiple',
          id: 'legalEntity',
          label: '法人实体',
          options: [],
          getUrl: `${config.baseUrl}/api/finance/role/legalEntity/query?page=0&size=100`,
          method: 'get',
          labelKey: 'entityName',
          valueKey: 'companyReceiptedOID',
          listKey: "rows"
        }]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}/>
        )
      }
    },
    {
      title: '事件回调',
      description: '每一个表单控件都可以通过设置::event::来进行表单控件的::onChange::回调，在SearchArea组件用::eventHandle::进行处理。',
      state: {
        searchForm: [{
          type: 'input',
          id: 'eventHandle1',
          label: '输入框1',
          placeholder: '请输入',
          event: 'EVENT1'
        },{
          type: 'input',
          id: 'eventHandle2',
          label: '输入框2',
          placeholder: '请输入',
          event: 'EVENT2'
        }],
        text: '请进行输入'
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          },
          eventHandle: (event, value) => {
            switch(event){
              case 'EVENT1':
                context.setState({ text: `输入框1的值改变了！值为${value}` });
                break;
              case 'EVENT2':
                context.setState({ text: `输入框2的值改变了！值为${value}` });
            }
          }
        }
      },
      getContent: context => {
        const { searchForm, text } = context.state;
        return (
          <div>
            <div style={{ marginBottom: 10 }}>{text}</div>
            <SearchArea searchForm={searchForm}
                        submitHandle={context.handleSubmit}
                        clearHandle={context.clear}
                        eventHandle={context.eventHandle}/>
          </div>
        )
      }
    },
    {
      title: 'Chooser组件的集成',
      description: '通过设置::type::为::list::可以集成::Chooser::组件, ::listType::对应::Chooser::内的::type::属性，' +
      '其余::Chooser::属性例如::listExtraParams::、::labelKey::、::valueKey::等与::Chooser::组件API一致',
      state: {
        searchForm: [
          {
            type: 'list',
            id: 'applicantOIDs',
            label: '申请人',
            listType: 'user',
            labelKey: 'fullName',
            valueKey: 'userOID',
            listExtraParams: {roleType: 'TENANT'},
          }
        ]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}
                      eventHandle={context.eventHandle}/>
        )
      }
    },
    {
      title: 'Inputter组件的集成',
      description: '通过设置::type::为::inputter::可以集成::Inputter::组件。其余::Inputter::属性例如::listExtraParams::、::valueKey::等与::Inputter::组件API一致。',
      state: {
        searchForm: [
          {
            type: 'inputter',
            id: 'applicantFullName',
            placeholder: '请选择/输入',
            label: '申请人',
            listType: 'user',
            valueKey: 'fullName',
            listExtraParams: {roleType: 'TENANT'}
          }
        ]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}
                      eventHandle={context.eventHandle}/>
        )
      }
    },
    {
      title: 'Selector组件的集成',
      description: '通过设置::type::为::selector::可以集成::Selector::组件。除::type::为::selectorType::外，其余::Selector::属性与::Selector::组件API一致。',
      state: {
        searchForm: [
          {
            type: 'selector',
            id: 'setOfBooks',
            label: '帐套',
            selectorType: 'setOfBooksByTenant',
          }
        ]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}
                      eventHandle={context.eventHandle}/>
        )
      }
    },
    {
      title: 'entity属性',
      description: '通过设置::entity::可以使::select::与::list::对应的组件返回整个对象而不是只有对应的::value::。',
      state: {
        searchForm: [
          {
            type: 'list',
            id: 'applicantOIDs',
            label: '申请人',
            listType: 'user',
            labelKey: 'fullName',
            valueKey: 'userOID',
            listExtraParams: {roleType: 'TENANT'},
            entity: true,
          },
          {
            type: 'select', id: 'setOfBooksId', label: '帐套', placeholder: '请选择', options: [],
            getUrl: `${config.baseUrl}/api/setOfBooks/by/tenant`, method: 'get', entity: true,
            labelKey: 'setOfBooksCode', valueKey: 'id', getParams: { roleType: 'TENANT' }
          },
        ]
      },
      getMethod: context => {
        return {
          handleSubmit: result => {
            console.log(result)
          },
          clear: () => {
            console.log('重置了')
          }
        }
      },
      getContent: context => {
        const { searchForm } = context.state;
        return (
          <SearchArea searchForm={searchForm}
                      submitHandle={context.handleSubmit}
                      clearHandle={context.clear}
                      eventHandle={context.eventHandle}/>
        )
      }
    },
  ]
}
